<template>
    <div style="display: flex;width: 100%;height: 100vh; background-color: black;">
        <!-- 左边 -->
        <div style="width: 50%;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <W网页和代码基础 :代码="代码" :访问路径="访问路径" :组件名="组件名" />
        </div>
        <!-- 右边 -->
        <div style="width: 50%;background-color: rgba(25, 8, 36, 0.521);color: aliceblue; min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 180px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="组件修改">刷新组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 绑定值，选中选项卡的 name -->
                    <div :style='样式1'>
                        <h4>绑定值，选中选项卡的 name : </h4>
                        <spen :style='样式2'>英:v_model,类型:string / number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.v_model'
                            size='small'></el-radio-group></div>
                    <!-- 风格类型 -->
                    <div :style='样式1'>
                        <h4>风格类型 : </h4>
                        <spen :style='样式2'>英:type,类型:string,默认:card/border-card</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.type' size='small'>
                            <el-radio label="card">卡片类型 </el-radio>
                            <el-radio label="border-card">有边框卡片 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 标签是否可关闭 -->
                    <div :style='样式1'>
                        <h4>标签是否可关闭 : </h4>
                        <spen :style='样式2'>英:closable,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.closable' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 标签是否可增加 -->
                    <div :style='样式1'>
                        <h4>标签是否可增加 : </h4>
                        <spen :style='样式2'>英:addable,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.addable' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 标签是否同时可增加和关闭 -->
                    <div :style='样式1'>
                        <h4>标签是否同时可增加和关闭 : </h4>
                        <spen :style='样式2'>英:editable,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.editable' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 选项卡所在位置 -->
                    <div :style='样式1'>
                        <h4>选项卡所在位置 : </h4>
                        <spen :style='样式2'>英:tab_position,类型:string,默认:top/right/bottom/left</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tab_position'
                            size='small'>
                            <el-radio label="top">上 </el-radio>
                            <el-radio label="right">右 </el-radio>
                            <el-radio label="bottom">下 </el-radio>
                            <el-radio label="left">左 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 标签的宽度是否自撑开 -->
                    <div :style='样式1'>
                        <h4>标签的宽度是否自撑开 : </h4>
                        <spen :style='样式2'>英:stretch,类型:boolean,默认:-</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.stretch' size='small'>
                            <el-radio label="true">是 </el-radio>
                            <el-radio label="false">否 </el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 切换标签之前的钩子函数， 若返回 false 或者返回被 reject 的 Promise，则阻止切换。 -->
                    <div :style='样式1'>
                        <h4>切换标签之前的钩子函数， 若返回 false 或者返回被 reject 的 Promise，则阻止切换。 : </h4>
                        <spen :style='样式2'>英:before_leave,类型:Function(activeName, oldActiveName),默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.before_leave'
                            size='small'>
                            <el-radio label="切换标签之前的钩子函数">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <h2 style="margin-top: 15px;background-color:rgb(63, 45, 45);">-------触发的事件 -----</h2>
                    <!-- tab 被选中时触发 -->
                    <div :style='样式1'>
                        <h4>tab 被选中时触发 : </h4>
                        <spen :style='样式2'>英:tab_click,类型:(pane: TabsPaneContext, ev: Event),默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tab_click' size='small'>
                            <el-radio label="tab被选中时触发">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- activeName 改变时触发 -->
                    <div :style='样式1'>
                        <h4>activeName 改变时触发 : </h4>
                        <spen :style='样式2'>英:tab_change,类型:(name: TabPaneName),默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tab_change' size='small'>
                            <el-radio label="activeName改变时触发">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 点击 tab 移除按钮时触发 -->
                    <div :style='样式1'>
                        <h4>点击 tab 移除按钮时触发 : </h4>
                        <spen :style='样式2'>英:tab_remove,类型:(name: TabPaneName),默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tab_remove' size='small'>
                            <el-radio label="tab移除按钮时触发">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 点击 tab 新增按钮时触发 -->
                    <div :style='样式1'>
                        <h4>点击 tab 新增按钮时触发 : </h4>
                        <spen :style='样式2'>英:tab_add,类型:—,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.tab_add' size='small'>
                            <el-radio label="tab新增按钮时触发">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>
                    <!-- 点击 tab 的新增或移除按钮后触发 -->
                    <div :style='样式1'>
                        <h4>点击 tab 的新增或移除按钮后触发 : </h4>
                        <spen :style='样式2'>英:edit,类型:(paneName: TabPaneName | undefined, action: 'remove' | 'add'),默认:
                        </spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.edit' size='small'>
                            <el-radio label="tab的新增或移除按钮后触发">有例子</el-radio>
                            <el-radio label="">无</el-radio>
                        </el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>

    </div>
</template>
<script setup>
import W网页和代码基础 from "../网页和代码基础.vue"
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance();
const 路由 = proxy.router
const 库 = proxy.lib
const API = proxy.API
const 组件名 = ref('标签页')
const 属性 = ref({
})

const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 10px;font-size: 14px;')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')



const 代码 = ref('')
const 访问路径 = ref('http://localhost:3000/#/gotabs')

const 组件修改 = async () => {
    访问路径.value = ""
    let 结果 = await API.组件修改(组件名.value, 属性.value, "", "")
    if (结果.err == 'ok') {
        代码.value = 结果.msg
        访问路径.value = 结果.url
        console.log("访问路径", 访问路径.value)
        ElMessage.success("修改成功")
    } else {
        访问路径.value = 结果.url
        ElMessage.error("错误:" + 结果.err)
    }

}

</script>
<style lang="scss"  scoped>
h4 {
    background-color: rgb(65, 104, 75);
    text-align: center;
}
</style>
